<template>
    <div class="user-container">
        <div class="userBg">
            <div class="userInfo">
                <div class="avatarImg">
                    <van-image @click="updateAvatar" round width="80px" height="80px" :src="avatar" />
                    <input v-show="false" type="file" ref="avatar" @change="uploadAvatar" />
                </div>
                <div style="color:#fff">
                    <van-button @click="upload" size="mini">更换头像</van-button>
                </div>
                <div class="username">
                    登录名：{{ $store.state.userInfo.username }}
                </div>
                <van-icon class="setting" name="setting-o" size="24" @click="setting"/>
            </div>
        </div>

        <div class="flex_c_c">
            <div class="info">
                <van-cell-group>
                    <van-cell title="我的订单" value="全部订单" @click="$router.push('/orderlist')" is-link />
                    <van-cell title="收货地址" @click="$router.push('/address')" is-link />
                    <van-cell title="设置" is-link />
                    <van-cell title="关于乐淘" value="v1.0.3" />
                    <van-button type="danger" block @click="logout">退出登录 </van-button>
                </van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { upload } from "../api/user.js"
export default {
    computed: {
        avatar() {
            return 'http://api.w0824.com/' + this.$store.state.userInfo.avatar;
        }
    },
    methods: {
        ...mapMutations(['clearUserInfo']),
        logout() {
            // 调用vuex清除token
            let _this = this;
            this.$dialog.confirm({
                title: '确认退出吗'
            })
                .then(() => {
                    _this.clearUserInfo();
                    _this.$router.replace('/home/index')
                })
                .catch(() => {
                    // on cancel
                });

        },
        async uploadAvatar() {
            let user_id = this.$store.state.userInfo.id;
            let file = this.$refs.avatar.files[0]

            if (file) {
                let formData = new FormData()
                formData.append('user_id', user_id)
                formData.append('file', file)
                // 更新用户头像
                let { message, status, src } = await upload(formData);
                console.log(src)
                this.$toast(message)
                if (status === 0) {
                    // 修改vuex中的用户信息的头像
                    this.$store.commit('updateAvatar', src);
                }
            }
        },
        upload() {
            // 触发input上传文件的单击事件
            this.$refs.avatar.click();
        },
        updateAvatar(){
            this.$dialog({
                message:"更换头像"
            })
        },
        setting(){
            this.$dialog({
                message:"其他设置"
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.user-container {
    height: 100vh;
    background: #eee;

    .userBg {
        padding: 10px;
        height: 180px;
        background: rgb(55, 138, 110);
    }

    .userInfo {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 16px;
        color:#eee;
        margin: 0 10px;
        font-size:14px;

        .avatarImg {
            position: relative;
            img {
                width: 100%;
            }
        }

        .setting {
            position: absolute;
            right: 0;
            top: 0;
        }

    }

    .info {
        width: 90vw;
        padding: 10px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #fff;
        margin-top: -40px;
    }
}
</style>
